import { CategoryInfo } from '@/services/ant-design-pro/api';
import { PageContainer } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Card, Image, Input } from 'antd';
import type { SearchProps } from 'antd/es/input/Search';
import React, { useEffect, useState } from 'react';
import './index.less';
const { Search } = Input;

const MainPage: React.FC = () => {
  const [categoryState, setCategoryState] = useState<API.CategoryInfo>({});

  //发送获取信息的请求
  const getCategoryInfo = async () => {
    try {
      const msg = await CategoryInfo();
      if (msg.data) {
        // console.log(msg.data)
        setCategoryState(msg);
        // console.log(categoryList)
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    getCategoryInfo().then();
  }, []);

  useEffect(() => {
    console.log(categoryState);
  }, [categoryState]);

  const onSearch: SearchProps['onSearch'] = (value) => {
    history.push(`/book/search/${value}`);
  };

  // @ts-ignore
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
      >
        <div className="wrap">
          <Search
            placeholder="input search text"
            allowClear
            enterButton
            size="large"
            onSearch={onSearch}
          />
        </div>
        <div className="banner">
          <div className="wrap">
            <img
              src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/src_img/banner1.jpg"
              alt="banner"
            />
          </div>
        </div>
        <div className="enterpriseAdv">
          <div className="wrap">
            <div className="adv">
              <span className="iconfont icon-yunshu"></span>
              <br />
              <h2>运输高效快速</h2>
              <p>
                宠物商店运输高效迅速，运用专业物流体系确保宠物安全准时送达，全程监控，让主人放心托付。
              </p>
            </div>
            <div className="adv">
              <span className="iconfont icon-xihuan"></span>
              <br />
              <h2>宠物可爱有趣</h2>
              <p>宠物商店汇聚各类萌宠，活泼可爱，趣味盎然，满足不同爱宠人士需求。</p>
            </div>
            <div className="adv">
              <span className="iconfont icon-yanzhengyanzhengma"></span>
              <br />
              <h2>商品安全保证</h2>
              <p>
                宠物商店严选高品质商品，从源头把控质量，确保每一件宠物用品安全可靠，让爱宠生活更健康无忧
              </p>
            </div>
          </div>
        </div>

        <div className="wrap">
          <div className="showPet">
            <h2>宠物展示</h2>
            <div className="petBox">
              {categoryState.data &&
                categoryState.data.map((item) => (
                  <Card className="pet" key={item.categoryId} title={item.name}>
                    <Image className={'pet-img'} width={200} src={item.imgUrl} />
                    <p className="pet-desc">{item.desc}</p>
                  </Card>
                ))}
            </div>
          </div>
        </div>
      </Card>
    </PageContainer>
  );
};

export default MainPage;
